<template>
    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div class="bluetiao"></div>
        <span>重置密码</span>
      </div>
    </template>
    <el-form :inline="true"  :rules="rules" :model="form" ref="form" class="demo-form-inline">
        <el-form-item label="旧密码" prop="oldpwd">
            <el-input  
            placeholder="请输入旧密码"
            v-model="form.oldpwd"  
            type="password"
            
            />
        </el-form-item><br>
        <el-form-item label="新密码" prop="newpwd">
            <el-input  
            placeholder="请设置新密码" 
            v-model="form.newpwd" 
            type="password"
            
            />
        </el-form-item><br>
        <el-form-item label="确认密码" prop="password">
            <el-input  
            placeholder="请输入" 
            v-model="form.password"  
            type="password"
            
            />
        </el-form-item>
    </el-form>
    <el-form-item>
        <el-button type="primary" class="save" @click="handleSave">保存</el-button>
    </el-form-item>
    </el-card>
</template>

<script lang="ts">
import { updateUserPwd } from '../../api/user'
import { ElMessage, ElMessageBox } from 'element-plus'

export default{
    data() {
        const equalToPassword = (rule,value,callback) => {
            if(this.form.newpwd !== value){
                callback(new Error("两次输入的密码不一致"))
            }else{
                callback()
            }
        }
        return {
            test:'1test',
            form:{
                oldpwd:'',
                newpwd:'',
                password:''
            },
            //表单校验
            rules:{
                oldpwd:[
                    { required: true, message: "旧密码不能为空", trigger: "blur" }
                ],
                newpwd:[
                    { required: true, message: "新密码不能为空", trigger: "blur" },
                    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
                ],
                password:[
                { required: true, message: "确认密码不能为空", trigger: "blur" },
                { required: true, validator: equalToPassword, trigger: "blur" }
                ]
            }
            
        }
    },
    methods:{
        handleSave(){
            this.$refs["form"].validate(valid => {
                if(valid) {
                    updateUserPwd(this.form.oldpwd,this.form.newpwd).then(
                        response =>{
                            if (response.status === 200) {
                                ElMessage({
                                    type:'success',
                                    message:'保存成功'
                                })
                                setTimeout(()=>{
                                    this.$router.push('/login')
                                },2000)
                                
                            } else {
                                console.log(response.message);
                            }
                        }
                    )
                }
            })
        }
    }
}
    
</script>

<style scoped>
.save{
    position: relative;
    left: 0;
    bottom: -200px;
}
.demo-form-inline{
    text-align: center;
}
.box-card {
  height: 600px;
}
.bluetiao{
    border-width: 0px;
    position: relative;
    left: -10px;
    top: 20px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

</style>
